<!DOCTYPE html>
<html>
	<head>
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3419308738737930"
		     crossorigin="anonymous"></script>
		<meta charset="utf-8">
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>千千万能工具箱-词云图</title>
	</head>
	<body style="background-color: gainsboro;">
		<div id="app">
			<div id="wordcloud" style="height: 400px; width: 100%;"></div>
			<br/>
			 <van-cell-group inset>
			   <van-field
			     v-model="value"
			     rows="5"
			     autosize
			     label="内容"
			     type="textarea"
			     placeholder="请输入词云图,格式为xx:20,xx:30(数字越大权重越高)"
			   />
			 </van-cell-group>
			<br/>
			<van-row>
			  <van-col span="12" style="text-align: center;"> <van-button type="primary" @click="generate">生成词云图</van-button></van-col>
			  <van-col span="12"  style="text-align: center;"><van-button type="success" @click="downLoad">下载词云图</van-button></van-col>
			</van-row>
			<br/>
			<br/>
		</div>
		<!-- 引入样式文件 -->
		<link
		  rel="stylesheet"
		  href="../../js/vant4/index.css"
		/>
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/wordcloud2.js"></script>
		<script src="../../js/html2canvas.min.js"></script>
		<script src="../../js/vue3/vue3.js"></script>
		<script src="../../js/vant4/vant.min.js"></script>
		<script>
						const baseUrl = "https://api.lqcpws.cn"	

			
			const app = Vue.createApp({
			data(){
				return {
					title :'hello',
					value :"",
					

				}
			},
			methods:{
				generate(){
					this.loadWordCloud(this.converData())
				},
				downLoad(){
					html2canvas(document.getElementById("wordcloud"),{
					  scale: 2, // 缩放因子，可自定义，例如设置为2表示截图分辨率为原始大小的两倍
					  useCORS: true, // 启用跨域支持，如果需要截图包含跨域图片则必须设置为 true
					  allowTaint: true, // 允许截取有 taint（污染）标记的画布，提高截图质量
					}).then(function(canvas) {
					  // 将 canvas 转换为 base64 编码的图片数据
					  var imageData = canvas.toDataURL('image/png');
					  
					  // 在页面中展示截图
					var link = document.createElement('a');
					link.href = imageData;
					link.download = 'wordcloud.png';
					link.style.display = 'none';
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
					});
				},
				  loadWordCloud(data){
					  // 生成词云图
					  WordCloud(document.getElementById('wordcloud'), {list:data});
				  },
				  converData(){
					  if(this.value==undefined||this.value==""){
						vant.showToast('内容格式不准确！');
						return [[]]
					  }
					 let arr= this.value.split(",")
					 console.log(arr)
					 if(arr.length==0){
						 vant.showToast('内容格式不准确！');
						 return [[]]
					 }
					 let data=[]
					 for(let i=0;i<arr.length;i++){
						 if(arr[i]==undefined||arr[i]==""){
							 vant.showToast('内容格式不准确！');
							 return [[]]
						 }
						let tempArr= arr[i].split(":")
						if(tempArr.length!=2){
							vant.showToast('内容格式不准确！');
							return [[]]
						}
						data.push([tempArr[0],parseInt(tempArr[1])])
					 }
					 return data;
				  },
				  requestCount() {
				  	// let ys=	LZString.compressToBase64(JSON.stringify(nes.toJSON()))
				  	// 	console.log(JSON.parse(LZString.decompressFromBase64(ys)))
				  	let _this = this
				  	$.ajax({
				  		type: 'get',
				  		url: baseUrl + "/pc/requestCountByDay",
				  		success: function(res) {
				  
				  
				  		}
				  
				  
				  	})
				  
				  },
			},
			mounted(){
             
			  this.value="重庆:40,上海:60,北京:100,天津:50,广东:70,湖南:38,福建:36,浙江:44"
				   this.loadWordCloud(this.converData())
				   this.requestCount()
				   
			}
			});
			app.use(vant);

			app.use(vant.Lazyload);
			
			
			app.mount('#app');
		</script>
	</body>
</html>